<template>
  <div class="login-container">
    <el-card class="login-box">
      <div class="clearfix" slot="header">
        <h3>欢迎来到MoonCherry商店</h3>
      </div>
      <div style="text-align: center">
        <el-form :model="form" label-width="80px" >
          <el-form-item label="用户名">
            <el-input v-model="form.name" placeholder="username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
          </el-form-item>
          <div>还没有账号？<router-link to="/register">点我注册</router-link></div>
          <el-form-group>
            <el-button class="register-button" @click="registerHandle">
              <router-link to="/layout">登录</router-link>
            </el-button>
          </el-form-group>
        </el-form>
      </div>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Login5",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },errMsg:{
          message:'用户名或密码错误',
          isShow:false
        }
      }
    }, methods: {
      loginHandle() {
        var _this = this;
        this.axios({
          url: 'http://localhost:3000/user/login',
          method: 'get',
          params: {
            username: this.form.username,
            password: this.form.password
          }
        }).then(function (res) {
          if (res.data.flag){
            _this.$router.push('/layout')
          }else {
            // _this.errMsg.isShow=true;
            _this.$message({
              type:'error',
              message:'用户名或者密码错误'
            })
          }

        })
      }
    }
  }
</script>

<style scoped>

  .login-container {
    background-image: url("../../assets/mooncherry(1).jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 100%;

  }

  .login-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 450px;
    height: 350px;
    background-color: rgba(255, 255, 255, .4);
    box-shadow: -11px 9px 11px 0px #b9bfbd;
    opacity: .7;
    border-radius: 12px;
    color: #42b983;
    font-size: 1.2em;
    font-weight: bolder;
  }




</style>
